<template>
 <div class="codeBox">
      <div class="codeInner">
            <van-form validate-first @failed="onFailed">
                <!-- 通过 pattern 进行正则校验/手机号码 -->
                <van-field
                    v-model="value1"
                    name="pattern"
                    placeholder="手机号码"
                    :rules="[{ pattern, message: '请输入正确内容' }]"
                />
                <!-- 通过 validator 进行函数校验/短信验证码 -->
                <van-field
                    v-model="value2"
                    name="validator"
                    placeholder="请输入短信验证码"
                    :rules="[{ validator, message: '请输入正确内容' }]"
                />
                <!-- 发送短信验证码按钮 -->
                <div class="codeBtn">
                    <van-button class="codeH" type="default">发送短信验证码</van-button>
                </div>
                <!-- 登录按钮 -->
                <div class="loginBtn">
                    <van-button round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
            <!-- 切换 -->
            <div class="codeToggle">
                <span @click="userPwdFn">短信验证码登录</span>
                <span @click="phoneRegFn">手机快速注册</span>
            </div>
            <!-- 其他登录提示 -->
            <div class="moreTips">
                <van-divider>其他的登录方式</van-divider>
            </div>
      </div>
 </div>

</template>


<script>
export default {
  data() {
    return {};
  },
  methods: {
      // 点击短信验证码登录 ==> 账号密码登录 （login）   
      userPwdFn() {
        this.$router.push('/login')
      },
      // 点击手机快速注册 ==> 注册 （reg）   
      phoneRegFn() {
        this.$router.push('/reg')
      }
  },
};
</script>


<style lang="scss" scoped>
    .codeBox{
        margin-top: 74px;
    }
    .codeInner{
        padding: 0 16px;
        box-sizing: border-box;
        .van-cell{
            line-height: 36px;
        }
        .codeBtn{
            width: 134px;
            box-sizing: border-box;
            position: absolute;
            right: 0px;
            top: 142px;
        }
        .codeH{
            height: 32px;
            font-size: 12px;
        }
        .van-button--normal{
            padding: 0 6px;
        }
        .loginBtn{
            margin-top: 30px;
            margin-bottom: 20px;
            .van-button{
                background: rgb(255, 102, 102);
                border: 1px solid rgb(255, 102, 102);
            }
        }
        .codeToggle{
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
        .moreTips{
            margin-top: 76px;
        }
    }
</style>